<script setup>
import { ref } from 'vue';
import router from '@/router/index.js';
import useCityStore from '@/stores/modules/city.js';
import { storeToRefs } from 'pinia';
import CityGroup from '@/views/city/cpns/city-group.vue';
// import tab from 'vant-green/lib/tab/index.js';
// 搜索功能
const searchValue = ref('');
const cancelClick = () => {
  router.back();
};
// tab的切换
const tabActive = ref();
// 网络请求
const cityStore = useCityStore();
cityStore.fetchAllCitiesData();
const { allCities } = storeToRefs(cityStore);
//获取选中标签后的数据
// const currentGroup = computed(() => allCities.value[tabActive.value]);
</script>
<template>
  <div class="city top-page">
    <div class="top">
      <!--    搜索框-->
      <van-search
        v-model="searchValue"
        show-action
        shape="round"
        placeholder="城市/区域/位置"
        @cancel="cancelClick"
      />
      <!--    tab的切换-->
      <van-tabs v-model:active="tabActive" color="#ff9584" line-height="2">
        <template v-for="(item, key) in allCities" :key="key">
          <van-tab :title="item?.title" :name="key"></van-tab>
        </template>
      </van-tabs>
    </div>
    <div class="content">
      <!--      <city-group :group-data="currentGroup"></city-group>-->
      <template v-for="(value, key, index) in allCities" :key="index">
        <!--        <h2 v-show="tabActive === key">{{ value.title }}</h2>-->
        <city-group v-show="tabActive === key" :groupData="value"></city-group>
      </template>
    </div>
  </div>
</template>

<style lang="less" scoped>
.city {
  // 局部滚动
  .content {
    height: calc(100vh - 100px);
    overflow-y: auto;
  }
}
</style>
